<template>
  <el-form label-width="80px">
    <!-- 顶部内容 -->
    <el-row :gutter="20" type="flex" justify="space-between">
        <el-col :span="24">
          <span style="color:pink ; font-size:12px">说明: 目前支持学科和关键字条件筛选</span>
        </el-col>
       <el-form-item>
        <el-col :span="2">
          <el-button type="success" @click="$router.push('/questions/new')">新增试题</el-button>
        </el-col>
       </el-form-item>
      </el-row>
      <!-- 表单内容 -->
      <el-row :gutter="20">
        <el-col :span="6">
         <el-form-item label="学科">
          <template>
            <el-select v-model="subjectID" placeholder="请选择" @change="catalog=''" @focus="hFocus" style="width:100%">
              <el-option
                v-for="item in subjectList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </template>
         </el-form-item>
        </el-col>
        <el-col :span="6">
         <el-form-item label="二级目录">
          <template>
            <el-select v-model="catalog" placeholder="请选择" @focus="hCatalogFocus" style="width:100%">
              <el-option
                v-for="item in catalogList"
                :key="item.id"
                :label="item.directoryName"
                :value="item.id">
              </el-option>
            </el-select>
          </template>
         </el-form-item>
        </el-col>
        <el-col :span="6">
         <el-form-item label="标签">
          <template>
            <el-select v-model="tag" placeholder="请选择" @focus="hTagsFocus" style="width:100%">
              <el-option
                v-for="item in tagesList"
                :key="item.id"
                :label="item.tagName"
                :value="item.id">
              </el-option>
            </el-select>
          </template>
         </el-form-item>
        </el-col>
        <el-col :span="6">
         <el-form-item label="关键字">
          <el-input  placeholder="根据题干搜索" v-model="value" style="width:100%"></el-input>
         </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="6">
         <el-form-item label="试题类型">
          <template>
            <el-select v-model="questionType" placeholder="请选择" @focus="hCatalogFocus" style="width:100%">
              <el-option label="单选" value="1"></el-option>
              <el-option label="多选" value="2"></el-option>
              <el-option label="简答" value="3"></el-option>
            </el-select>
          </template>
         </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="难度">
          <template>
            <el-select v-model="difficulty" placeholder="请选择" @focus="hCatalogFocus" style="width:100%">
              <el-option label="简单" value="1"></el-option>
              <el-option label="一般" value="2"></el-option>
              <el-option label="困难" value="3"></el-option>
            </el-select>
          </template>
         </el-form-item>
        </el-col>
        <el-col :span="6">
         <el-form-item label="方向">
          <template>
            <el-select v-model="direction" placeholder="请选择"  style="width:100%">
              <el-option
                v-for="(item,index) in directions"
                :key="index"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
          </template>
         </el-form-item>
        </el-col>
        <el-col :span="6">
         <el-form-item label="录入人">
          <template>
            <el-select v-model="creator" placeholder="请选择" @focus="hTagsFocus" style="width:100%">
              <el-option label="超级管理员" value="2"></el-option>
              <el-option label="录入管理员" value="3"></el-option>
            </el-select>
          </template>
         </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" type="flex" justify="space-between">
        <el-col :span="6">
         <el-form-item label="题目备注" >
          <el-input v-model="remarks" style="width:100%"></el-input>
         </el-form-item>
        </el-col>
        <el-col :span="6">
         <el-form-item label="企业简称" >
          <el-input v-model="enterprise" style="width:100%"></el-input>
         </el-form-item>
        </el-col>
        <el-col :span="6">

          <el-form-item label="城市">
            <el-row :gutter="4"  type="flex">
             <el-col :span="12">
               <el-select v-model="city" placeholder="请选择" @change="area=''" style="width:100%">
              <el-option
                v-for="(item,index) in provinces"
                :key="index"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
             </el-col>
            
            <el-col :span="12">
              <el-select v-model="area" placeholder="请选择" @focus="hcitysFocus" style="width:100%">
              <el-option
                v-for="(item,index) in citys"
                :key="index"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
            </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-row type="flex" justify="end">
          <el-button size="small" style="margin-left:210px" @click="hClear">清除</el-button>
          <el-button size="small" type="primary" @click="hsearch">搜索</el-button>
          </el-row>
         </el-form-item>
        </el-col>
      </el-row>
  </el-form>
</template>

<script>
// 导入封装的格式化数据
import { direction } from '@/api/hmmm/constants.js'
import {provinces,citys} from '@/api/hmmm/citys.js'
// 导入封装ajax请求
import { list as subjectNameList, simple } from '@/api/hmmm/subjects.js'
import { list as catalogList } from '@/api/hmmm/directorys.js'
import { list as tagsList } from '@/api/hmmm/tags.js'
export default {
  props:{
    list:{
      type:Array,
      required:true
    }
  },
  data(){
    return{
      city:'', // 当前选择的城市
      area:'',  // 当前选择的地区名称
      provinces:provinces(),  // 城市列表
      citys:[],  // 城市下的地区列表
      directions:direction,  // 方向列表
      subjectList:[], // 学科列表
      subjectID:'',   // 当前选择的学科
      catalogList:[],  // 二级目录列表
      catalog:'',   // 当前选择的目录 
      tagesList:[],  // 标签列表
      tag:'' , // 当前选中标签
      value: '', // 搜索关键字
      questionType:'' , // 当前选择的试题类型
      difficulty:'', // 当前选择的难度
      direction:'', // 当前选择的方向
      creator:'',  // 当前选择的录入人
      remarks:'',  // 当前输入的题目备注
      enterprise:'' // 当前输入的企业名称
    }
  },
  methods:{
    // 聚焦学科选择框
    hFocus(){
      this.dofocus()
    },
    // 封装学科列表请求函数
    async dofocus(){
      try{
        // 调用ajax请求
        const {data:res} = await simple()
        console.log('学科列表',res)
        // 数据回填
        this.subjectList = res
      }catch(err){
        this.$message.error(err.message)
      }
    },
    // 聚焦二级目录选项
    hCatalogFocus(){
      this.doCatalogFocus()
    },
    // 封装目录列表请求函数
    async doCatalogFocus(){
      try{
        // 调用ajax请求
        const {data:res} = await catalogList()
        console.log('二级目录',res.items)
        // 处理数据,并回填
        this.catalogList = res.items.filter(item => item.subjectID === this.subjectID)
      }catch(err){
        this.$message.error(err.message)
      }
    },
    // 聚焦标签选项
    hTagsFocus(){
      this.doTagsFocus()
    },
    // 封装标签列表请求函数
    async doTagsFocus(){
      try{
        // 调用ajax请求
        const {data:res} = await tagsList()
        console.log('标签列表',res.items)
        // 处理数据,并回填
        this.tagesList = res.items.filter(item => item.subjectID === this.subjectID)
      }catch(err){
        this.$message.error(err.message)
      }
    },
    // 聚焦城市下的地区选项框
    hcitysFocus(){
      this.citys = citys(this.city)
    },
    // 点击清除按钮
    hClear(){
      this.city = '',
      this.area = '',
      this.provinces = []
      this.citys = [],
      this.directions = []
      this.subjectList = [],
      this.subjectID = '',
      this.catalogList = [],
      this.catalog = '',
      this.tagesList = [],
      this.tag = ''
      this.value = 
      this.questionType = ''
      this.difficulty = '',
      this.direction = '',
      this.creator = '',
      this.remarks = '',
      this.enterprise = ''
    },
    // 点击搜索按钮
    hsearch(){
      const res = this.list.filter(item => item.subjectID === this.subjectID)
      this.$emit('hsearch', res)
    }
  }
}
</script>
